// 引入字体 Timeis Montserrat
@import url('./font/font.css');

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;

    body {
        height: 100%;
        width: 100%;
    }
}

#timer {
    height: 100%;
    width: 100%;
    background-color: #333;
    overflow: hidden;
    font-size: 0px;
    display: flex;
    &>main {
        margin:auto;
        width:max-content;
        display: flex;
        flex-direction: column;
        padding-bottom:100px;
        // background-color: pink;
        &>div {
            $num: 10;
            &:nth-of-type(1) {
                font-family: Timeis, 'Arial Black', 'Arial-BoldMT', 'Arial Bold', Arial, Helvetica, sans-serif;
                color: white;
                font-size: 18px * $num;
                font-weight: normal;
                display: flex;
                justify-content: center;

                &>span {
                    display: inline-block;
                    overflow: hidden;
                    vertical-align: bottom;
                    text-align: center;
                    line-height: 1;
                    letter-spacing: 0px;

                    &:nth-of-type(2n+0) {
                        width: 18px * $num * 0.5;
                    }

                    &:nth-of-type(2n+1) {
                        width: 18px * $num * 1.5;
                    }
                }
            }
            &:nth-of-type(2) {   
                align-self: flex-end;
                padding-top:20px;
                font-family: Montserrat,'Arial Black','Arial-BoldMT','Arial Bold',Arial,Helvetica,sans-serif;
                letter-spacing: 0;
                font-weight: normal;
                
                    color: white;
                &>span {
                    font-size: 18px * $num /5;
                }
            }
        }

    }
}
#timer-btn{
    width:100%;
    height:100px;
    position: fixed;
    bottom: 0px;
    cursor: pointer;
    z-index: 9999;
}
